<template>
	<view class="CateGoryList">
		<view v-for="item in cateGories">
			<view>{{item.categoryGroupName}}</view>
			<view>
				<view v-for="i in item.items" @click="toSongLists2(i.categoryId,i.categoryName)">
					{{i.categoryName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		toSongLists2
	} from "@/utils/Redirect.js"
	//存放歌单分类
	const cateGories = uni.getStorageSync("cateGories")
</script>

<style scoped>
	.CateGoryList {
		padding: 10rpx;
	}

	.CateGoryList>view>view:nth-child(1) {
		font-weight: bold;
		font-size: 1.5em;
	}

	.CateGoryList>view>view:nth-child(2) {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx;
		text-align: center;
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}

	.CateGoryList>view>view:nth-child(2)>view {
		background-color: #26262e;
		color: #dddddd;
		padding: 10rpx 20rpx;
		border-radius: 50px;
	}
</style>